<template>
  <div class="login-container">
    <div class="login-box">
      <el-row>
        <!-- 左侧栏 -->
        <el-col :span="12" class="login-left">
          <div class="left-content">
            <h2 class="left-title">小周数据治理中心</h2>
            <p class="left-desc">该项目用于python期末作业，不做任何商业用途。数据都是随机生成的，仅供参考!!!</p>
            <!-- <p class="left-desc">周</p> -->
            <!-- <img src="/static/img/devices-illustration.png" alt="Devices" class="devices-img"> -->
            <!-- 请将 '/static/img/devices-illustration.png' 替换为你的设备插画图片路径 -->
          </div>
        </el-col>

        <!-- 右侧登录表单 -->
        <el-col :span="12" class="login-right">
          <el-form ref="loginFormRef" :model="loginForm" class="login-form" label-position="top">
            <h3 class="login-title">欢迎登录</h3>
            <el-form-item prop="username">
              <el-input
                v-model="loginForm.username"
                placeholder="请输入账号"
                :prefix-icon="UserIcon"
                size="large"
                clearable
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                type="password"
                placeholder="请输入密码"
                :prefix-icon="LockIcon"
                show-password
                clearable
                size="large"
                @keyup.enter="handleLogin"
              />
            </el-form-item>
            <el-form-item class="options-item">
              <!-- <el-checkbox v-model="rememberPassword" label="记住密码" size="large" /> -->
              <el-link type="primary" :underline="false" class="forgot-password" @click="ElNotification({title:'提示',message:'请自己前往数据库修改',type:'error'})">忘记密码</el-link>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                class="login-button"
                :loading="loading"
                style="width: 100%;"
                size="large"
                @click="handleLogin"
              >
                登 录
              </el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <!-- 页脚 -->
    <div class="el-login-footer">
      <span>Copyright © 2025 周毅盛</span>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage,ElNotification } from 'element-plus';
import { User, Lock } from '@element-plus/icons-vue';
import axios from 'axios';
import { useStore } from '../../store/index.js';
import { lo } from 'element-plus/es/locale/index.mjs';

// --- 图标 ---
const UserIcon = User;
const LockIcon = Lock;

// --- 响应式数据 ---
const loginFormRef = ref(null);
const loginForm = reactive({
  username: '',
  password: '',
});
const rememberPassword = ref(false); // 新增：记住密码状态
const loading = ref(false);
const router = useRouter();
const store = useStore()

// --- 方法 ---
const handleLogin = async () => {
  if (!loginForm.username || !loginForm.password) {
    ElMessage.warning('请输入用户名和密码');
    return;
  }
  loading.value = true;
  try {
    const response = await axios.post('/api/login', {
      username: loginForm.username,
      password: loginForm.password,
      // 可以根据需要将 rememberPassword 的值也发送给后端
    });
    if (response.data.code === 200) {
      ElMessage.success('登录成功');
      // store.userinfo = response.data.data
      localStorage.setItem('userInfo', JSON.stringify(response.data.data));
      
      // sessionStorage.setItem('userInfo', response.data.data);
      // console.log(response.data);
      
      // 可以在这里处理记住密码的逻辑，例如保存 token 到 localStorage 或 sessionStorage
      router.push('/admin/home');
    } else {
      ElMessage.error(response.data.msg || '用户名或密码错误');
    }
  } catch (error) {
    console.error("Login request failed:", error);
    ElMessage.error('登录请求失败，请检查网络或联系管理员');
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  /* 背景图，请替换为你图片中的背景 */
  /* background: url('/static/img/login-bg-building.jpg') center center / cover no-repeat; */
  position: relative;
}

.login-box {
  width: 800px; /* 调整登录框总宽度 */
  height: 450px; /* 调整登录框高度 */
  background-color: #fff; /* 右侧背景默认为白色 */
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* 防止子元素溢出圆角 */
  display: flex; /* 使用 flex 确保内部 row 填充 */
}

.login-box > .el-row {
  width: 100%; /* 让 el-row 充满 login-box */
}

.login-left {
  background-color: #4a6cea; /* 左侧背景色，根据图片调整 */
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中内容 */
  color: #fff;
  height: 100%; /* 确保左侧栏高度充满 */
}

.left-content {
  text-align: left;
}

.left-title {
  font-size: 24px;
  margin-bottom: 15px;
  font-weight: bold;
}

.left-desc {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 10px;
  opacity: 0.9;
}

.devices-img {
  display: block;
  width: 80%; /* 调整图片宽度 */
  margin: 30px auto 0; /* 顶部留出间距并水平居中 */
  opacity: 0.9;
}

.login-right {
  padding: 40px 50px; /* 增加右侧内边距 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%; /* 确保右侧栏高度充满 */
}

.login-title {
  font-size: 22px;
  font-weight: bold;
  color: #333;
  margin-bottom: 30px; /* 增加标题下方间距 */
  text-align: left;
  position: relative;
  padding-bottom: 10px; /* 为下划线留出空间 */
}
/* 标题下划线 */
.login-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px; /* 下划线宽度 */
    height: 3px; /* 下划线高度 */
    background-color: #4a6cea; /* 下划线颜色 */
    border-radius: 2px;
}


.login-form {
  width: 100%;
}

/* --- 输入框样式调整 --- */
:deep(.el-input__wrapper) {
  background-color: #fff !important;
  box-shadow: none !important; /* 移除默认阴影 */
  border-radius: 0 !important; /* 移除圆角 */
  padding-left: 5px !important; /* 减少左内边距，让图标更靠近 */
  border-bottom: 1px solid #dcdfe6; /* 添加底部边框 */
}
:deep(.el-input__inner) {
  color: #303133 !important;
}
/* 聚焦时底部边框变色 */
:deep(.el-input__wrapper.is-focus) {
    border-bottom-color: #4a6cea !important; /* 聚焦时边框颜色 */
}
/* 移除密码框切换图标的边框影响 */
:deep(.el-input__suffix) {
    right: 5px; /* 调整密码图标位置 */
}
/* 输入框图标颜色 */
:deep(.el-input__prefix .el-icon) {
  color: #909399 !important; /* 图标颜色 */
  margin-right: 5px; /* 图标和文字间距 */
}

.el-form-item {
  margin-bottom: 25px; /* 表单项间距 */
}

/* 记住密码和忘记密码行 */
.options-item {
    margin-bottom: 20px; /* 调整下方间距 */
}
:deep(.options-item .el-form-item__content) {
    display: flex;
    justify-content: space-between; /* 两端对齐 */
    align-items: center;
}
:deep(.el-checkbox__label) {
    font-size: 14px; /* 复选框文字大小 */
    color: #606266;
}
.forgot-password {
    font-size: 14px;
}

/* --- 按钮样式 --- */
.login-button {
  background-color: #4a6cea; /* 按钮背景色 */
  border-color: #4a6cea; /* 按钮边框色 */
  border-radius: 4px; /* 轻微圆角 */
  font-weight: 500;
  transition: all 0.3s ease;
}

.login-button:hover {
  background-color: #6b88f0;
  border-color: #6b88f0;
}

/* 页脚 */
.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: rgba(255, 255, 255, 0.8); /* 页脚文字颜色 */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* 轻微文字阴影 */
  z-index: 1;
}
</style>